<link rel="stylesheet" type="text/css" href="<?php echo ROOT_URL; ?>public/media/media.css"/>
<script>
    $(function(){
        //DateRangerPicker
        var duration = $('#duration');
        duration.daterangepicker({
            format: 'MMM D, YYYY',
            ranges: {
                'This week': [moment().subtract('days', (moment().day() || 7) - 1), moment()],
                'Last 7 days': [moment().subtract('days', 6), moment()],
                'Last week': [moment().subtract('days', (moment().day() || 7) - 1 + 7), moment().subtract('days', moment().day() || 7)],
                'Last 3 weeks': [moment().subtract('days', (moment().day() || 7) - 1 + 21), moment().subtract('days', moment().day() || 7)],
                'This month': [moment().startOf('month'), moment()],
                'Last 30 days': [moment().subtract('days', 29), moment()],
                'Last month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
            },
            startDate: moment().subtract('days', (moment().day() || 7) - 1),
            endDate: moment()
        }, function(start, end) {
            $('#begin').val(start.format('DD-MM-YYYY'));
            $('#end').val(end.format('DD-MM-YYYY'));
        });
        duration.data('daterangepicker').updateInputText();
        duration.data('daterangepicker').notify();
    });
</script>

<script src="<?php echo ROOT_URL; ?>public/jUpload/jquery.uploadfile.min.js"></script>
<link href="<?php echo ROOT_URL; ?>public/jUpload/uploadfile.css" rel="stylesheet">
<script type="text/javascript">

    $(document).ready(function () {
        var slide = $('#slide');
        var buttons = {
            previous: slide.find('.lof-previous'),
            next: slide.find('.lof-next')
        };

        $obj = slide.lofJSidernews({
            interval: 4000,
            direction: 'opacitys',
            easing: 'easeInOutExpo',
            duration: 1200,
            auto: false,
            maxItemDisplay: 4,
            navPosition: 'horizontal',
            navigatorHeight: 80,
            navigatorWidth: 80,
            mainWidth: 600,
            buttons: buttons
        });

        var settings = {
            url: "<?php echo ROOT_URL; ?>public/jUpload/upload.php",
            method: "POST",
            allowedTypes:"jpg,png,gif,mp4,flv",
            fileName: "myfile",
            multiple: true,
            showPreview: true,
            previewWidth: 80,
            previewHeight: 80,
            maxFileCount: 4,
            showDelete: true,
            onSuccess:function(files, data, xhr)
            {
                $.each(files, function (data, xhr) {
                    var slide = $('.lof-main-wapper');
                    var html = '<li>';
                    html += '<img src="<?php echo ROOT_URL; ?>public/jUpload/uploads/'+files+'">';
                    html += '</li>';
                    slide.append(html);
                });
                var slide = $('#slide');
                var buttons = {
                    previous: slide.find('.lof-previous'),
                    next: slide.find('.lof-next')
                };

                $obj = slide.lofJSidernews({
                    interval: 4000,
                    direction: 'opacitys',
                    easing: 'easeInOutExpo',
                    duration: 1200,
                    auto: false,
                    maxItemDisplay: 4,
                    navPosition: 'horizontal',
                    navigatorHeight: 80,
                    navigatorWidth: 80,
                    mainWidth: 600,
                    buttons: buttons
                });

            },
            onError: function(files, status, errMsg)
            {
            }
        }

        $("#upload-plugin").uploadFile(settings);
    });

</script>


<div>
    <div class="create-campaign">
        <p>
            <input name="title" class="input-40" type="text" placeholder="Tên chiến dịch">
        </p>
        <p>
            <textarea name="description" class="textarea-40" placeholder="Mô tả chiến dịch"></textarea>
        </p>
        <p>
            <input type="hidden" id="begin" name="begin" value="23-07-2014">
            <input type="hidden" id="end" name="end" value="23-07-2014">
            <input id="duration" type="text">
        </p>

        <div id="slide" class="lof-slidecontent" style="width:600px; height:400px;">
            <div class="preload">
                <div></div>
            </div>
            <div class="lof-main-outer" style="width:600px; height:300px;">
                <ul class="lof-main-wapper">
                    <li>
                        <img src="<?php echo ROOT_URL; ?>upload/images/89480724090602632031.png" title="Newsflash 2">
                    </li>
                </ul>
            </div>
            <div class="lof-navigator-wapper upload-image-wrapper">
                <div onclick="return false" href="" class="lof-next">Next</div>
                <div class="lof-navigator-outer">
                    <ul id="image-before-upload" class="lof-navigator">
                        <li>
                            <span class="remove-image-upload"></span>
                            <img src="<?php echo ROOT_URL; ?>upload/images/89480724090602632031.png" title="Newsflash 2">
                            <span class="progress-image-upload"></span>
                        </li>
                    </ul>
                </div>
                <div onclick="return false" href="" class="lof-previous">Previous</div>
            </div>
        </div>

        <form action="<?php echo ROOT_URL; ?>public/upload/server/php/"  method="POST" accept-charset="utf-8" enctype="multipart/form-data">
            <div class="plugin-media">
                <div class="upload-media">
                    <div id="upload-plugin">Upload Photos/Video</div>
                </div>
                <div class="choose-media" onclick="showPluginMedia();">Choose from Photos...</div>
            </div>
        </form>
        <p>
            <input id="createCampaign" class="btn color-button" type="button" value="Tạo chiến dịch">
        </p>
    </div>
</div>

<?php
/*    require_once('media.php');
*/?>
